<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="">
    <title>模板</title>
    <style type="text/css">
        body {
            background-color: #eccc68;
        }

        canvas {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <h1>模板</h1>
    <script type="module">
        // import * as TWO from './two.js'
        import { Scene, Point, Render, Rect, Circle, PickContrls, Vector2 } from './two.js'
        // import Point from './two.js'
        // import Render from './two.js'

        let point = new Point()
        point.position.x += 1
        // console.log(point.position)
        let render = new Render()
        render.setSize(400, 300)
        render.setPixelRatio(2)
        // render.setTickLength(1000 / 10)
        render.setAnimationLoop(animation)
        document.querySelector('body').appendChild(render.domElement)
        const scene = new Scene()
        const rect = new Rect(50, 50)
        rect.setAttribute('stroke', false)
        rect.position.copy({ x: 150, y: 150 })
        scene.add(rect)

        const circle = new Circle(150, 200, 25, 120)
        // console.log(circle.getAttribute('position'))
        // console.log(circle.getPositions())
        circle.setAttribute('stroke', false)
        scene.add(circle)

        const rect1 = new Rect(50, 50)
        rect1.setAttribute('stroke', false)
        rect1.position.copy({ x: 150, y: 250 })
        scene.add(rect1)

        // const bar = new Vector2(75, 0)

        const controls = new PickContrls(scene, render.domElement)
        controls.setPixelRatio(2)

        function relate(obj1, obj2, bar) {
            if (obj1.p === undefined) {
                obj1.p = 0
            }
            if (obj2.p === undefined) {
                obj2.p = 0
            }
            const refA = Vector2.add(bar.rotateAround(obj1.p), obj1.position)
            const refB = Vector2.add(Vector2.mul(bar, -1).rotateAround(obj2.p), obj2.position)

            const diff = Vector2.sub(refB, refA)
            const mid = Vector2.add(refA, Vector2.mul(diff, 0.5))

            const mf = Vector2.mul(diff, .1)

            const dr1 = Vector2.sub(mid, obj2.position)
            const dr1l = dr1.length
            dr1.normalize()
            const vat1 = Vector2.add(obj2.velocity, new Vector2(dr1l * -dr1.y, dr1l * dr1.x))

            const dr2 = Vector2.sub(mid, obj1.position)
            const dr2l = dr2.length
            dr2.normalize()
            const vat2 = Vector2.add(obj1.velocity, new Vector2(dr2l * -dr2.y, dr2l * dr2.x))

            const dm = Vector2.sub(vat2, vat1)

            // mf.add(Vector2.mul(dm, .001))
            // console.log(mf)
            const mfc = .1
            obj1.force.add(Vector2.mul(mf, mfc))
            obj2.force.add(Vector2.mul(mf, -mfc))
            obj1.p += 0.01
            obj2.p -= 0.01
        }

        function test() {

            const refA = Vector2.add(new Vector2(0, 75), rect.position)
            const refB = Vector2.add(new Vector2(0, -75), circle.position)
            // const refC = Vector2.add(new Vector2(0, -50), rect1.position)
            // const refA = Vector2.add(bar, rect.position)
            // const refB = Vector2.add(Vector2.mul(bar, -1), circle.position)
            // console.log(refA, refB)
            const diff = Vector2.sub(refB, refA)
            const mid = Vector2.add(refA, Vector2.mul(diff, 0.5))

            // console.log(refB, refA)
            const mf = Vector2.mul(diff, .1)

            const dr1 = Vector2.sub(mid, rect.position)
            const dr1l = dr1.length
            dr1.normalize()
            const vat1 = Vector2.add(rect.velocity, new Vector2(dr1l * -dr1.y, dr1l * dr1.x))

            const dr2 = Vector2.sub(mid, circle.position)
            const dr2l = dr2.length
            dr2.normalize()
            const vat2 = Vector2.add(circle.velocity, new Vector2(dr2l * -dr2.y, dr2l * dr2.x))

            const dm = Vector2.sub(vat2, vat1)

            // mf.add(Vector2.mul(dm, .001))
            // console.log(mf)
            const mfc = .1
            rect.force.add(Vector2.mul(mf, mfc))
            circle.force.add(Vector2.mul(mf, -mfc))
            // console.log(rect.force, circle.force)
        }

        function animation() {

            // test()
            const bar = new Vector2(50, 0)
            const bar1 = new Vector2(0, 50)
            relate(rect, circle, bar)
            relate(circle, rect1, bar)

            render.render(scene)
            // console.log(1)
        }

    </script>
</body>

</html>